import { dictTree, getParkVideoList, getParkPhotoList } from "./request.js";
import { formatURL, setBrowseNumber } from "./base.js";

let params = {
	pageNum: 1,
	pageSize: 9,
	total: 0,
	pages: 0,
	type: "",
	bannerType: ""
};

// 视频实例
var player = videojs("example_video", {
	poster: "",
	controls: true,
	autoplay: false,
	fluid: true,
	techOrder: ["html5"],
	loop: false,
	muted: false,
	preload: "metadata"
});

// 预览图实例
var viewer = new Viewer(document.getElementById("viewer"), {
	toolbar: {
		zoomIn: 2,
		zoomOut: 2,
		oneToOne: 2,
		reset: 2,
		prev: {
			show: 2,
			size: "large"
		},
		play: {
			show: 2,
			size: "large"
		},
		next: {
			show: 2,
			size: "large"
		},
		rotateLeft: 2,
		rotateRight: 2,
		flipHorizontal: 2,
		flipVertical: 2
	},
	movable: false
});

$("#header").load("./layout/header.html", function () {
	$($(".navbarList > li")[2]).addClass("headerActive");
	$($(".navbarList > li")[2]).find("a").attr({
		href: "javascript:;"
	});
});

$("#footer").load("./layout/footer.html", function () {
	$("#accordionExample").on("hide.bs.collapse show.bs.collapse", function (e) {
		let target = e.target;
		let partens = "#" + $("#" + target.id).attr("aria-labelledby");
		$(partens).find("i").toggleClass("bi-chevron-down");
		$(partens).find("i").toggleClass("bi-chevron-up");
	});
    setBrowseNumber()
});

$(".tabbar_m .tabbar").click(function () {
	params.pageNum = 1;
	$(".tabbar_m .tabbar").removeClass("active");
	$(this).addClass("active");
	if ($(this).data("key") == "photo") {
		$(".photoBox").html("");
		$(".photo,.video,.vr").hide();
		$(".photo").show();
		getDictTree("PHOTO_TYPE");
	} else if ($(this).data("key") == "video") {
		$("#videoBox").html("");
		$(".photo,.video,.vr").hide();
		$(".video").show();
		getDictTree("VIDEO_TYPE");
	} else if ($(this).data("key") == "vr") {
		$(".photo,.video,.vr").hide();
		$(".vr").show();
	}
});

const getDictTree = function (type) {
	let str = "";
	$(".list-type").html(str);
	dictTree(type).then((res) => {
		if (res.code == 200) {
			let list = res.data.children || [];
			str = "";
			$.each(list, function (index, item) {
				str += `
                    <li class="list-group-item" data-dictCode="${item.label}" data-type="${item.label}/${item.dictCode}">${item.label}</li>
                `;
			});
			let dataType = "";
			if (type == "PHOTO_TYPE") {
				$(".photo .list-type").html(str);
				$($(".photo .list-type > li")[0]).addClass("active");
				dataType = $($(".photo .list-type > li")[0]).attr("data-dictCode");
				params.bannerType = dataType;
				getPhotoList();
			} else if (type == "VIDEO_TYPE") {
				$(".video .list-type").html(str);
				$($(".video .list-type > li")[0]).addClass("active");
				dataType = $($(".video .list-type > li")[0]).attr("data-type");
				params.type = dataType;
				getVideoList();
			}
		}
	});
};

// 获取字典值
getDictTree("PHOTO_TYPE");

// 获取图片数据
const getPhotoList = function () {
	getParkPhotoList(params).then((res) => {
		if (res.code == 200) {
			let list = res.data.list || [];
			renderPhoto(list);
			params.total = res.data.total;
			if (params.total > 0) {
				layui.use(["laypage", "layer"], function () {
					var laypage = layui.laypage;
					//总页数大于页码总数
					laypage.render({
						elem: "photoPageBox",
						count: params.total, //数据总数
						limit: params.pageSize,
						jump: function (obj, first) {
							if (!first) {
								params.pageNum = obj.curr;
								pagePhotoList();
							}
						}
					});
				});
			} else {
				$("#photoPageBox").html("");
			}
		}
	});
};

const pagePhotoList = function () {
	getParkPhotoList(params).then((res) => {
		if (res.code == 200) {
			let list = res.data.list || [];
			renderPhoto(list);
		}
	});
};

// 相册类目选择
$("#photoCollapseExample").on(
	"hide.bs.collapse show.bs.collapse",
	function (e) {
		$(".photo .showBox").find("i").toggleClass("bi-chevron-down");
		$(".photo .showBox").find("i").toggleClass("bi-chevron-up");
	}
);

// 视频类目选择
$("#videoCollapseExample").on(
	"hide.bs.collapse show.bs.collapse",
	function (e) {
		$(".video .showBox").find("i").toggleClass("bi-chevron-down");
		$(".video .showBox").find("i").toggleClass("bi-chevron-up");
	}
);

// 获取视频数据
const getVideoList = function () {
	getParkVideoList(params).then((res) => {
		if (res.code == 200) {
			let list = res.data.records || [];
			renderVideo(list);
			params.total = res.data.total;
			if (params.total > 0) {
				layui.use(["laypage", "layer"], function () {
					var laypage = layui.laypage;
					//总页数大于页码总数
					laypage.render({
						elem: "videoPageBox",
						count: params.total, //数据总数
						limit: params.pageSize,
						jump: function (obj, first) {
							if (!first) {
								params.pageNum = obj.curr;
								pageVideoList();
							}
						}
					});
				});
			} else {
				$("#videoPageBox").html();
			}
		}
	});
};

const pageVideoList = function () {
	getParkVideoList(params).then((res) => {
		if (res.code == 200) {
			let list = res.data.records || [];
			renderVideo(list);
		}
	});
};

// 图片类目选择
$(".photo .list-type").on("click", "li", function () {
	$(".list-type li").removeClass("active");
	$(this).addClass("active");
	$("#photoCollapseExample").collapse("hide");
	let dataType = $(this).attr("data-dictCode");
	params.pageNum = 1;
	params.bannerType = dataType;
	getPhotoList();
});

// 视频类目选择
$(".video .list-type").on("click", "li", function () {
	$(".list-type li").removeClass("active");
	$(this).addClass("active");
	$("#videoCollapseExample").collapse("hide");
	let dataType = $(this).attr("data-type");
	params.pageNum = 1;
	params.type = dataType;
	getVideoList();
});

// 查看图片
$(".photoBox").on("click", "div", function () {
	let imgUrl = $(this).find("img").attr("src");
	$("#viewer").html(
		`<div class="d-none">
                <img
                    src="${imgUrl}"
                    alt=""
                />
            </div>`
	);
	viewer.update();
	viewer.show();
});

// 播放视屏
$("#videoBox").on("click", "div", function () {
	let videoUrl = $(this).attr("data-videourl");
	let data = null;
	if (/\.m3u8$/.test(videoUrl)) {
		data = {
			src: videoUrl,
			type: "application/x-mpegURL"
		};
	} else {
		data = {
			src: videoUrl,
			type: "video/mp4"
		};
	}

	player.src(data);
	player.load(data);
	player.play();
});

// 渲染图片列表
const renderPhoto = function (arr) {
	let html = "";
	$.each(arr, function (index, val) {
		html += `
                    <div class="col-6 col-md-6 col-lg-4 col-xl-4 text-center">
                        <img
                            src="${formatURL(val.imgUrl)}" class="w-100"
                            alt=""
                        />
                        <p class="name">${val.bannerName}</p>
                    </div>
                `;
	});
	$(".photoBox").html(html);
};
// 渲染视频
const renderVideo = function (arr) {
	let html = "";
	$.each(arr, function (ind, val) {
		html += `
                    <div class="col-6 col-md-6 col-lg-4 col-xl-4 text-center" data-toggle="modal" data-target="#exampleModal" data-videoUrl="${
											val.videoUrl
										}">
                        <img
                            src="${formatURL(val.coverImg)}" class="w-100"
                            alt=""
                        />
                        <p class="name">${val.videoName}</p>
                    </div>
                `;
	});
	$("#videoBox").html(html);
	$("#exampleModal").on("hidden.bs.modal", function (event) {
		player.reset();
	});
};
